<template>
    <div>
        <el-row class="title">
            权限管理
        </el-row>
        <el-button type="primary" style="margin-bottom: 20px;" @click="addFormVisible = true">添加</el-button>
        <el-table
                :data="this.$store.state.permissions"
                style="width: 100%;margin-bottom: 20px;"
                row-key="permissions_id"
                border
                default-expand-all
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column
                    fixed
                    type="index"
                    label="序号"
                    width="200"/>
            <el-table-column
                    prop="permissions_id"
                    v-if="false"/>
            <el-table-column
                    prop="permissions_name"
                    label="名称"
                    width="400">
            </el-table-column>
            <el-table-column
                    prop="permissions_type"
                    label="类型"
                    width="400">
            </el-table-column>
            <el-table-column
                    prop="permissions_router"
                    label="路由">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作">
                <template slot-scope="scope">
                    <el-button @click="updateClick(scope.row)" type="text" size="small">修改</el-button>
                    <el-button @click="delClick(scope.row.user_id)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- Add Form -->
        <el-dialog title="新建权限" :visible.sync="addFormVisible">
            <el-form :model="addForm">
                <el-form-item label="名称" label-width="15%">
                    <el-input v-model="addForm.name" style="width: 50%"/>
                </el-form-item>
                <el-form-item label="类型" label-width="15%">
                    <el-select v-model="addForm.type" placeholder="请选择权限类型" style="width: 50%">
                        <el-option  label="list" value="list" />
                        <el-option  label="page" value="page" />
                        <el-option  label="button" value="button" />
                    </el-select>
                </el-form-item>
                <el-form-item label="路由" label-width="15%" v-show="addForm.type==='list'">
                    <el-input v-model="addForm.router" style="width: 50%"/>
                </el-form-item>
                <el-form-item label="父级权限" label-width="15%" v-show="addForm.type!=='list' && addForm.type!==''">
                    <el-select v-model="addForm.parentId" placeholder="请选择父级权限" style="width: 50%">
                        <el-option v-for="item in this.$store.state.permissions" :label=item.permissions_name :value=item.permissions_id />
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelAdd" style="margin-right: 10px">取 消</el-button>
                <el-button type="primary" @click="addPermissions" style="margin-right: 30px">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "index",
        inject: ['reload'],
        data() {
            return {
                addFormVisible: false,
                addForm: {
                    name:"",
                    router:"",
                    parentId:"",
                    type:""
                },
                updateForm: {}
            }
        },
        methods:{
            refresh() {
                this.reload()
            },
            getAllPermissions() {
                let that = this;
                // 获取全部的权限列表
                this.$axios({
                    method: "get",
                    url: "/permissionsController/getPermissions"
                }).then(response => {
                    this.$store.commit("setAllPermissions", response.data);
                }).catch(error => {
                    console.log(error)
                })
            },
            addPermissions(){
                this.$axios({
                    method:"get",
                    url:"/permissionsController/addPermissions",
                    params:{
                        name:this.addForm.name,
                        router:this.addForm.router,
                        type:this.addForm.type,
                        parentId:this.addForm.parentId
                    }
                }).then(response => {
                    this.addFormVisible = false;
                    this.refresh()
                    this.$message({
                        type: 'success',
                        message: '添加成功'
                    });
                }).catch(error => {
                    console.log(error)
                })
            },
            cancelAdd(){
                this.addFormVisible = false;
                this.refresh();
                this.$message({
                    type: 'info',
                    message: '已取消添加'
                })
            },
            delPermissions(permissions_id) {
                this.$axios({
                    method: "get",
                    url: "/permissionsController/delPermissions",
                    params: {
                        permissions_id: permissions_id
                    }
                }).catch(error => {
                    console.log(error)
                })
            },
            delClick(permissions_id) {
                this.$confirm('将删除此权限及其下级权限, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.delRole(permissions_id);
                    this.refresh();
                    this.$message({
                        type: 'success',
                        message: '删除成功'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        },
        mounted() {
            this.getAllPermissions()
        }
    }
</script>

<style scoped>
    .title {
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        color: #409EFF;
        font-size: 20px;
        font-weight: bold;
        height: 80px;
        line-height: 80px;
        padding-left: 20px;
        margin-bottom: 20px;
    }
</style>